<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="/css/myAnimate.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/fonts/iconfont.css" />
    <link rel="stylesheet" href="/plugin/zTree/css/zTreeStyle.css" />
    <link rel="stylesheet" href="/css/theme_red.css" />
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script
      type="text/javascript"
      src="/plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script type="text/javascript" src="/js/common.js"></script>
  </head>
  <body class="child_body">
    <div class="flex menuRoleSet">
      <div class="menuBox comModal">
        <div id="menuTree" class="ztree"></div>
      </div>
      <div class="flex-1">
        <div class="comModal">
          <div class="blueTitle flex">
            <div class="titleText flex-1">按钮设置</div>
            <div class="titleOperCheck">
              <span class="iconfont icon-check"></span>
              <span class="float-right m-l-5 text">全选</span>
            </div>
          </div>
          <div class="checkBox">
            <div class="comCheckBox">
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1" />
                手工录入
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2" />
                批量完成
              </label>
              <label class="checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3" />
                删除
              </label>
            </div>
          </div>
        </div>
        <div class="comModal m-t-15">
          <div class="blueTitle flex">
            <div class="titleText flex-1">自定义列表</div>
            <div class="titleOperCheck">
              <span class="iconfont icon-check"></span>
              <span class="float-right m-l-5 text">全选</span>
            </div>
          </div>
          <div class="p-15">
            <div class="grayTitle flex">
              <div class="titleText flex-1">自定义列表</div>
              <div class="titleOperCheck">
                <span class="iconfont icon-check"></span>
                <span class="float-right m-l-5 text">全选</span>
              </div>
            </div>
            <div class="checkBox">
              <div class="comCheckBox">
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" value="option1" />
                  手工录入
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" value="option2" />
                  批量完成
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" value="option3" />
                  删除
                </label>
              </div>
            </div>
          </div>
          <div class="p-15">
            <div class="grayTitle flex">
              <div class="titleText flex-1">自定义列表</div>
              <div class="titleOperCheck">
                <span class="iconfont icon-check"></span>
                <span class="float-right m-l-5 text">全选</span>
              </div>
            </div>
            <div class="checkBox">
              <div class="comCheckBox">
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" value="option1" />
                  手工录入
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" value="option2" />
                  批量完成
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" value="option3" />
                  删除
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="/plugin/zTree/js/jquery.ztree.all.min.js"></script>
  <script>
    $(function () {

        //全选点击切换
        $(".titleOperCheck").on('click', function () {
            $(this).children('.iconfont').toggleClass('icon-check')
            $(this).children('.iconfont').toggleClass('icon-checked-full')
            if ($(this).children('.iconfont').hasClass('icon-check')) {
                $(this).children('.text').html('全选')
            } else if ($(this).children('.iconfont').hasClass('icon-checked-full')) {
                $(this).children('.text').html('取消全选')
            }
        })

      bindComEvent();
      var zNodes = [
        { id: 1, pId: 0, name: "父节点1" },
        { id: 11, pId: 1, name: "子节点1" },
        { id: 12, pId: 1, name: "子节点2" },
        { id: 2, pId: 0, name: "父节点2" },
        { id: 3, pId: 0, name: "父节点3" },
        { id: 31, pId: 3, name: "3子节点1" },
        { id: 32, pId: 3, name: "3子节点2" },
      ];
      var zTreeSettings = {
        check: {
          chkboxType: { Y: "ps", N: "ps" },
          chkStyle: "",
          enable: false,
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0,
          },
        },
        callback: {
          onClick: zTreeOnClick,
        },
      };
      var myTree = $.fn.zTree.init($("#menuTree"), zTreeSettings, zNodes);
    });
    function zTreeOnClick(e, treeId, treeNode) {
      console.log(e, treeId, treeNode.name);
      $.myAlert({
        message: treeNode.name,
        type: "info",
      });
    }
  </script>
</html>
